<template>
	<view class="index-layout">
		<view class="header" :style="{ paddingTop: top + 'rpx' }">
			<image mode="heightFix" class="header_left"
				src="https://www.dingxians.cn/upload/20250424/6809a5d73d497.png"></image>
			<text class="header_title">在线开盒｜正品保障｜100%中奖</text>
			<view style="flex: 1"></view>

		</view>
		<view class="content">
			<!-- @scrolltolower="lower" -->

			<scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus"
				@refresherrefresh="refresh" @scrolltolower="onLoadMore" :refresher-enabled="true" scroll-y="true">
				<view class="banner">
					<swiper autoplay="true" circular="true" class="swiper" indicator-dots="true"
						indicator-active-color="white">
						<swiper-item class="swiper_item" v-for="(item, index) in bannerData" :key="item.id">
							<image @click="nextPage(item)" class="swiper_image" :src="item.image"></image>
						</swiper-item>
					</swiper>
				</view>

				<view class="image_box">
					<image @click="header('/pages/activity/task', 1, true)" mode="scaleToFill" class="image-item"
						src="https://www.dingxians.cn/images/index/renwu.png"></image>
					<!-- <image @click="getCouponPanel()" mode="scaleToFill" class="image-item"
            src="https://www.dingxians.cn/images/index/lingjuan.png"></image> -->
					<image @click="header('/packageA/welfare/index', 1, true)" mode="scaleToFill" class="image-item"
						src="https://www.dingxians.cn/images/index/fuliwu.png"></image>
				</view>
				<view class="tab">
					<!--          <view class="tab_item tab_bg" :class="'tab_bg_'+tabId"></view>-->
					<view @click="changeTab(item.id)" class="tab_item" :class="item.id === tabId ? 'active' : ''"
						v-for="item in tabData" :key="item.id">
						{{ item.title }}
					</view>
				</view>
				<view class="box">
					<view @click="navigateDetail(item.id)" class="box_item" v-for="item in blindBoxData" :key="item.id"
						:style="{
            backgroundImage: `url(https://www.dingxians.cn/static/newsta/index/4.png)`,

          }">
						<image mode="" :src="item.image" class="box_image"></image>
						<view class="box_right">
							<view class="box_right_content">
								<view class="box-msg">
									<view class="box-name">{{ item.name }}</view>
									<view>
										<span class="yuan">￥</span>
										{{ item.price }}
									</view>
								</view>
								<view class="buy-btn" :style="{
                  backgroundImage: `url(https://www.dingxians.cn/static/newsta/index/sm/pay.png)`,
                }">
								</view>
							</view>
							<view class="box_level" :style="{
                  backgroundImage: `url(https://www.dingxians.cn/static/newsta/index/sm/4.png)`,
                }">
								<image :src="prize.image" v-if="prize_index < 4" class="box_level_item"
									v-for="(prize, prize_index) in item.blind_box_prize" :key="prize.id"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="dange_box"></view>
			</scroll-view>

			<!-- 活动弹窗 -->
			<uni-popup class="popup" v-show="popData.length" v-for="(item, index) in popData" :key="item.id"
				:ref="'popup' + index" :mask-click="false">
				<image mode="widthFix" @click="nextPage(item)" class="pop_image" :src="item.image"></image>
				<image class="close_pop" @click.stop="closePop('popup' + index, index)"
					src="https://www.dingxians.cn/images/box/close.png">
				</image>
			</uni-popup>

			<!-- 领取优惠券弹窗 -->
			<uni-popup mask-background-color="rgba(0, 0, 0, 0.9)" class="coupon_popup" v-show="couponPopStatus"
				ref="coupon_popup" :mask-click="true">
				<view class="coupon_popup_box">
					<image class="close_pop" @click.stop="closeCouponPop()"
						src="https://www.dingxians.cn/images/shop/close-btn.png"></image>
					<view class="coupon_popup_content">
						<view class="coupon_popup_item" v-for="item in couponPopData.data" :key="item.id">
							<!-- <image class="coupon_popup_item_bg" src="http://www.qixdian.cn/upload/20230831/64f04af061345.png"></image> -->
							<view class="coupon_popup_left">
								<view class="coupon_popup_name">{{ item.name }}</view>
								<view class="coupon-info">
									<view class="coupon_popup_remark">{{ item.remark }}</view>
									<view class="coupon_popup_min_amount" v-if="item.min_amount">
										满{{ item.min_amount }}可用</view>
									<view class="coupon_popup_min_amount" v-else>无门槛</view>
								</view>
							</view>
							<view class="coupon_popup_right">
								<view class="coupon_popup_amount_box">
									<view style="font-size: 36rpx">￥</view>
									<view class="coupon_popup_amount">{{ item.amount }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="coupon-btn" v-if="couponPopData.status" @click="receiveCoupon()">全部领取</view>
				<view class="coupon-btn" v-else @click="closeCouponPop()">明天再来</view>

				<!-- 倒计时 -->
				<view class="coupon_popup_header_title">
					<uni-countdown class="countdown" color="#ded000" splitorColor="#ded000" :show-day="false"
						:hour="couponPopData.l_h" :minute="couponPopData.l_i" :second="couponPopData.l_s" />
					<view class="coupon_popup_header_remark">后不可领取</view>
				</view>
			</uni-popup>

			<!-- 强更弹窗 -->
			<uni-popup class="app_popup" v-show="showVersion" mode="center" ref="update_app" :mask-click="false">
				<view class="pop_box">
					<image class="pop_bg" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eeb4f594a71.png">
					</image>
					<view class="pop_version">
						<view class="pop_header">发现新版本 {{ versionData.version_no }}</view>
						<text class="pop_content">{{ versionData.content }}</text>
					</view>
					<view class="rate" v-if="downStatus">
						<view class="rate_image">
							<liu-progressbar :bgColor="'#A361F6'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF"
								:height="'15rpx'" />
						</view>
						<view class="rate_value">{{ percentVal }}%</view>
					</view>
					<view class="down_btn_group" v-else>
						<!-- <view class="down_btn cancel" @click="cancel()">取消</view> -->
						<view class="down_btn down" @click="updateApp()">更新</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<my-notify ref="notify" :content="this.notifyContent"></my-notify>

		<!-- #ifdef MP-WEIXIN -->
		<my-alert-dialog ref="kefuDialog" title="请截图扫码加客服微信" cancel-string="关闭" :showConfirm="false">
			<!-- <image src="https://www.dingxians.cn/upload/user_static/user/ic-kefu.png"
        style="width: 300rpx; height: 300rpx; margin: 50rpx auto"></image> -->
		</my-alert-dialog>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<my-alert-dialog ref="download_dialog" title="提示" :showConfirm="false" cancelString="关闭">
			<view class="dialog-content" style="text-align: center; margin: 20rpx 0">
				<!-- <image style="width: 300rpx; margin: 0 auto" src="https://www.dingxians.cn/upload/user_static/common/down_app.png"
          mode="aspectFit" /> -->
				<view>请扫码下载App抽盲盒</view>
			</view>
		</my-alert-dialog>
		<!-- #endif -->

	</view>
</template>

<script>
	import api from '../../api/index.js'

	export default {
		data() {
			return {
				bg: 'url("https://www.dingxians.cn/upload/user_static/index/bg.png")',
				popData: [],
				bannerData: [],
				tabData: [{
						id: 1,
						title: '热门',
					},
					{
						id: 2,
						title: '高爆',
					},
					{
						id: 3,
						title: '无限',
					},
				],
				tabId: 1,
				top: 80,
				blindBoxData: [],
				version_no: '',
				showVersion: false,
				percentVal: 0,
				versionData: {},
				mask: true,
				downStatus: false,
				couponPopData: {
					data: [],
					l_h: '',
					l_i: '',
					l_s: '',
					status: false,
				},
				couponPopStatus: false,
				refreshStatus: false,
				notifyContent: '',
				page: 1,
				lastPage: 1,
				isError: false,
			}
		},
		onLoad(e) {
			this.getData()
			this.getBanner()
			this.getPops()
			this.getNotify()
			// #ifdef MP-WEIXIN
			if (e.scene) {
				var bind_id = e.scene
				uni.setStorageSync("bind_id", bind_id)
			}
			// #endif
			const {
				safeArea
			} = uni.getSystemInfoSync()
			this.top = safeArea.top + 20
		},
		onShow() {
			this.percentVal = 0
			this.showVersion = false
			this.mask = true
			this.downStatus = false
			this.getVersion()
		},
		methods: {
			navigateDetail(id) {
				// #ifdef MP-WEIXIN
				//return this.$refs.download_dialog.show()
				// #endif
				this.header(`/pages/index/detail?id=${id}`)
			},
			onLoadMore() {
				if (this.page >= this.lastPage) return uni.showToast({
					icon: 'none',
					title: '没有更多了'
				})
				this.page++
				this.getData()
			},
			// 获取应用系统公告
			async getNotify() {
				const result = await api.notifies.index()
				if (result.code === 200) {
					if (!result.data) return
					this.notifyContent = result.data.content
					if (!this.notifyContent) return
					if (uni.getStorageSync('notify') !== this.notifyContent) {
						uni.setStorageSync('notify', this.notifyContent)
						this.$nextTick(() => {
							this.$refs.notify.show()
						})
					}
				}
			},
			goCustomer() {
				// #ifdef MP-WEIXIN
				this.$refs.kefuDialog.show()
				/*wx.openCustomerServiceChat({
				  extInfo: {
				    url: 'https://work.weixin.qq.com/kfid/kfcf40b036d744bf748'//客服地址链接
				  },
				  corpId: 'ww174d29d617d2136a',//必须和你小程序上的一致
				  success(res) {
				    console.log(res, 1)
				  },
				  fail(res) {
				    console.log(res, 2)
				  },
				})*/
				// #endif
				// #ifdef APP-PLUS
				let wechat = null
				plus.share.getServices((res) => {
					wechat = res.find((i) => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
								corpid: 'ww174d29d617d2136a', //企业ID
								url: 'https://work.weixin.qq.com/kfid/kfcf40b036d744bf748', //客服地址
							},
							(src) => {
								console.log('success:')
							},
							(err) => {
								console.log('error:')
							},
						)
					} else {
						uni.showToast({
							title: '当前环境不支持微信操作',
							icon: 'error',
						})
					}
				})
				// #endif
			},
			refresh() {
				this.page = 1
				this.blindBoxData = []
				if (!this.refreshStatus) {
					this.refreshStatus = true
					this.getData()
					this.getBanner()
				}
			},
			closeCouponPop() {
				this.$refs.coupon_popup.close()
				this.couponPopStatus = false
			},
			getCouponPanel() {
				api.couponPanels
					.index()
					.then((res) => {
						if (res.code === 200) {
							this.couponPopData = res.data
							this.couponPopStatus = true
							this.$refs.coupon_popup.open('center')
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			receiveCoupon() {
				api.couponPanels
					.store()
					.then((res) => {
						if (res.code === 200) {
							this.show(res.msg)
							this.closeCouponPop()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			nextPage(item) {
				if (item.url && item.login) {
					this.header(item.url, 1, true)
				} else if (item.url && !item.login) {
					this.header(item.url)
				}
			},
			checkVersion() {
				let ua = uni.getSystemInfoSync().platform
				if (/ios/i.test(ua)) {
					this.type = 'ios'
				} else if (/android/i.test(ua)) {
					this.type = 'android'
				}
				api.versions
					.check({
						refresh: 1,
						type: this.type,
						version_no: this.version_no,
					})
					.then((res) => {
						if (res.code === 200) {
							this.versionData = res.data
							if (res.data.status == 0) {
								uni.setStorageSync('update_app', 0)
							} else {
								this.showVersion = true
								this.$refs.update_app.open('center')
								uni.setStorageSync('update_app', 1)
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			getVersion() {
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.version_no = wgtinfo.version
					this.checkVersion()
				})
				// #endif
			},
			updateApp() {
				this.mask = false
				if (this.type == 'android') {
					this.androidUpdate()
					this.downStatus = true
				} else if (this.type == 'ios') {
					this.iosUpdate()
				}
			},
			androidUpdate() {
				let file_size = this.versionData.file_size

				var dtask = plus.downloader.createDownload(this.versionData.url, {}, function(d, status) {
					// 下载完成
					if (status == 200) {
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(
						error) {
							this.show('安装成功')
						})
					} else {
						this.show('安装失败')
					}
				})
				dtask.start()

				let timer = setInterval(() => {
					let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
					this.percentVal = Math.floor(percent * 100) // 转成整数展示
					if (percent >= 1) {
						// 注意百分比，及时清除定时器即可
						clearInterval(timer)
						this.showVersion = false
						this.$refs.pop.close()
					}
				}, 18)
			},
			iosUpdate() {
				plus.runtime.launchApplication({
						action: `${this.versionData.url}`,
					},
					function(e) {
						console.log('Open system default browser failed: ' + e.message)
					},
				)
			},
			changeBanner(e) {
				this.current = e.detail.current
			},
			changeTab(id) {
				if (id != this.tabId) {
					this.tabId = id
					this.refresh()
				}
			},
			getData() {
				// // #ifdef MP-WEIXIN
				// this.lastPage = 1
				// return this.blindBoxData = [{
				//   "id": 1,
				//   "name": "点我下载App抽盲盒",
				//   "image": "https://www.qixdian.cn/upload/20231023/65360ab247fcf.png",
				//   "price": "",
				// }]
				// // #endif
				uni.showLoading({
					title: '数据加载中',


				})
				api.blindBox
					.index({
						cat_id: this.tabId,
						page: this.page,
					})
					.then((res) => {
						uni.hideLoading()
						this.refreshStatus = false
						if (res.code === 200) {
							this.lastPage = res.data.last_page
							this.blindBoxData.push(...res.data.data)
							// console.log(this.blindBoxData)
						}
					})
					.catch((error) => {
						this.refreshStatus = false
						uni.hideLoading()
						/*setTimeout(() => {
						  uni.showToast({icon: 'none', title: 'Network error, please pull down to refresh', duration: 4000})
						}, 500)*/
						console.log(error)
						if (!this.isError) {
							this.isError = true
							setTimeout(() => {
								this.getBanner()
							}, 3500)
						}
					})
			},
			getBanner() {
				api.banners
					.index()
					.then((res) => {
						if (res.code === 200) {
							this.bannerData = res.data
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			getPops() {
				api.pops
					.index()
					.then((res) => {
						if (res.code === 200) {
							this.popData = res.data.data
							if (this.popData.length > 0) {
								this.$nextTick(() => {
									this.$refs.popup0[0].open('center')
								})
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			closePop(popup, index) {
				this.$refs[popup][0].close()
				let len = this.popData.length - 1
				if (index < len) {
					let i = index + 1
					let popup = `popup${i}`
					setTimeout(() => {
						this.$refs[popup][0].open('center')
					}, 500)
				}
			},
			next(page) {
				let urlData = ['/pages/index/index', '/pages/shop/index', '/pages/box/index', '/pages/user/index']
				if (urlData.includes(page.url)) {
					this.header(page.url, 2)
				} else {
					this.header(page.url + '?poster_image=' + page.poster_image)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@keyframes anim {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(30rpx);
		}
	}

	.index-layout {
		height: 100vh;
		width: 100%;
		/* #ifdef MP-WEIXIN */
		background: #141414;
		/* #endif */
		/* #ifdef APP-PLUS */
		background: url('https://www.dingxians.cn/images/index/bg.png');
		/* #endif */
		/*background-color: #141414;*/
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		align-items: center;
		// margin: 0 30rpx;
		/*  position: fixed;
   z-index: 9999;
  top: 0; */
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		// background-color:#D5C7FA ;
		padding-bottom: 10rpx;

		.header_left {
			display: flex;
			flex-direction: column;
			height: 38rpx;
			margin-left: 30rpx;
		}

		.header_title {
			color: #b2ad5d;
			font-size: 22rpx;
			margin-left: 4px;
			height: 38rpx;
			line-height: 38rpx;
			align-self: flex-end;
			margin-bottom: 10rpx;
		}

		.contact {
			width: 55rpx;
			height: 55rpx;
			margin-right: 30rpx;

			/* #ifdef MP-WEIXIN */
			margin-right: 180rpx;
			/* #endif */
		}
	}

	.content {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;

		position: relative;

		// background: linear-gradient(to bottom, #D5C7FA, #E2ECF5);
		/* .bg {
			position: fixed;
			z-index: -10;
			top: 0;
			left: 0;
			width: 100%;
		} */

		.tab {
			display: flex;
			align-items: center;
			width: 700rpx;
			margin: 30rpx auto 24rpx auto;
			// height: 80rpx;
			// justify-content: space-between;
			// background-color: #fff;
			position: relative;
			z-index: 1;

			.tab_item {
				transition: all 0.5s; //这是滑入划出的动画
				z-index: 3;
				width: 132rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 26rpx;
				color: white;
				background-image: url('https://www.dingxians.cn/images/shop/cat-item-bg.png');
				background-size: 100% 100%;
				margin-right: 24rpx;

				// border-radius: 10rpx;
				.tab_title {
					// background-color: #fff;
				}

				&.active {
					// color: #fff;
					font-weight: bold;
					background-image: url('https://www.dingxians.cn/images/shop/cat-item-bg-active.png');
				}

				// &:nth-child(2) {
				// 	margin-left: 20rpx;
				// }
				// &:last-child {
				// 	margin-right: 20rpx;
				// }
			}

			.tab_bg {
				width: 100rpx;
				height: 10rpx;
				position: absolute;
				border-radius: 10rpx;
				bottom: 0;
				left: 8rpx;
				background: linear-gradient(to right, #a361f6, #6a32ea);
				z-index: 2;

				&.tab_bg_2 {
					left: 156rpx;
				}

				&.tab_bg_3 {
					left: 306rpx;
				}
			}
		}

		.box {
			display: flex;
			/*margin: 10px 30rpx 0;*/
			width: 710rpx;
			margin: 10rpx auto;
			flex-direction: column;

			.box_item {
				// background-color: #fff;
				width: 710rpx;
				height: 292rpx;
				//background: url('https://www.dingxians.cn/upload/user_static/index/bg-box-normal.png') no-repeat;
				//animation: anim-box-normal 1.5s steps(48) infinite forwards;
				background-size: 100% 100%; // 14016PX
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				position: relative;

				.box_right_content {
					display: flex;
					justify-content: space-between;
					margin-bottom: 38rpx;

					.box-msg {
						width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: #ded000;

						.box-name {
							color: white;
							margin-bottom: 10rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.yuan {
							font-size: 22rpx;
						}
					}

					.buy-btn {
						width: 164rpx;
						height: 64rpx;
						background-size: 100% 100%;
						margin-right: 45rpx;
						font-size: 30rpx;
						font-family: 'youshe', serif;
						text-align: center;
						line-height: 64rpx;
					}
				}

				/* .box_item_bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 250rpx;
				z-index: -1;
			} */

				// background: linear-gradient(45deg, #d6c8fa, #f7f7f7);
				.box_image {
					width: 200rpx;
					height: 200rpx;
					margin: 20rpx 20rpx 74rpx 40rpx;
					animation: anim 2s infinite alternate;
				}

				.box_right {
					/* display: flex; */
					flex: 1;
					color: white;
					/* flex-direction: column;
				justify-content: space-around;
				height: 250rpx; */

					.box_right_top {
						font-size: 36rpx;
						font-weight: bold;
					}

					.box_price_box {
						display: flex;
						color: #ff5d5d;
						font-weight: bold;
						position: relative;
						height: 70rpx;
						align-items: center;

						.box_price_box_bg {
							position: absolute;
							left: 0;
							top: 0;
							height: 70rpx;
							z-index: -1;
						}

						.box_price_left {
							display: flex;
							align-items: baseline;
							margin-left: 20rpx;

							.box_price_icon {
								font-size: 24rpx;
							}

							.box_price {
								font-size: 40rpx;
							}
						}
					}

					.box_level {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 90%;

						.box_level_item {
							// flex-direction: column;
							display: flex;
							align-items: center;
							height: 86rpx;
							width: 86rpx;
							/*background: #141414;*/
							/*box-shadow: 0px 0px 6px 1px rgba(237, 222, 0, 0.4);*/
							border-radius: 0px 0px 0px 0px;
							background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-normal.png');
							background-size: 100% 100%;
							opacity: 1;
							/* border: 1px solid #665f00;*/
							// .box_level_name {
							// 	font-size: 24rpx;
							// 	font-weight: bold;
							// 	padding: 5rpx 10rpx;
							// 	border-radius: 5rpx;
							// }
							// .box_level_pro {
							// 	font-size: 24rpx;
							// 	margin-top: 10rpx;
							// }
						}
					}
				}
			}
		}

		.image_box {
			display: flex;
			justify-content: space-around;
			margin: 0 30rpx;

			.image-item {
				width: 228rpx;
				height: 120rpx;
			}

			&:last-child {
				width: 231rpx;
			}
		}

		.scroll {
			margin: 0 auto;
			height: 100%;
			overflow-y: hidden;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.banner {
			margin: 10px auto 30rpx auto;
			width: 690rpx;
			position: relative;

			&::after {
				content: '';
				background: url('https://www.dingxians.cn/images/index/swiper-border.png') no-repeat;
				background-size: 100% 100%;
				display: block;
				position: absolute;
				left: -2rpx;
				top: -2rpx;
				z-index: 1;
				height: 254rpx;
				width: 694rpx;
			}
		}

		.swiper {
			position: relative;
			height: 250rpx;
			border-radius: 10rpx;
			overflow: hidden;
			/* padding-top: 10rpx; */

			.swiper_item {
				width: 690rpx !important;
				height: 250rpx !important;
				border-radius: 10rpx;
				overflow: hidden;

				.swiper_image {
					width: 690rpx;
					height: 250rpx;
					border-radius: 10rpx;
				}
			}

			z-index: 2;
		}

		.popup {
			z-index: 1000;
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: transparent;

			.pop_image {
				width: 600rpx;
			}

			.close_pop {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -100rpx;
				left: 270rpx;
				z-index: 5;
			}
		}

		.coupon_popup {
			/* border: 1rpx solid red; */

			.coupon-btn {
				/*  margin-top: 30rpx; */
				width: 610rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
				background-size: 100% 100%;
				margin: 30rpx auto 0;
				font-size: 36rpx;
				color: white;
				font-family: 'youshe';
			}

			.coupon_popup_header_title {
				display: flex;
				margin-top: 30rpx;
				justify-content: center;
				font-size: 28rpx;

				/*  .countdown {
        color: #ded000 !important;
      } */

				.coupon_popup_header_remark {
					color: white;
				}
			}

			.coupon_popup_box {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 690rpx;
				height: 940rpx;
				background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-day.png');
				background-size: 100% 100%;

				// border: 1rpx solid red;
				.pop_image {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -2;
				}

				.close_pop {
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
					z-index: 5;
				}

				.coupon_popup_content {
					display: flex;
					flex-direction: column;
					/* position: absolute;
        top: 300rpx;
        left: 50rpx; */
					box-sizing: border-box;
					margin: 207rpx auto 50rpx;
					height: 100%;
					width: 556rpx;

					overflow: scroll;

					.coupon_popup_item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 566rpx;
						margin-bottom: 20rpx;
						height: 160rpx;
						position: relative;
						background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-coupon-item.png');
						background-size: 100% 100%;

						.coupon_popup_item_bg {
							width: 500rpx;
							height: 130rpx;
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							z-index: -1;
						}

						.coupon_popup_left {
							display: flex;
							flex-direction: column;
							height: 130rpx;
							justify-content: center;
							margin-left: 20rpx;

							.coupon-info {
								display: flex;
								font-size: 20rpx;
								color: #fffab5;
								margin-top: 10rpx;
							}

							.coupon_popup_name {
								font-size: 36rpx;
								color: #ded000;
								font-family: 'youshe';
							}

							/*  .coupon_popup_remark {
               font-size: 28rpx;
             } */

							.coupon_popup_min_amount {
								margin-left: 10rpx;
							}
						}

						.coupon_popup_right {
							display: flex;
							flex-direction: column;
							position: relative;
							height: 130rpx;
							justify-content: center;
							margin-right: 50rpx;

							.coupon_popup_amount_box {
								display: flex;
								align-items: baseline;
								font-size: 24rpx;
								margin-bottom: 20rpx;
								color: white;

								.coupon_popup_amount {
									font-size: 60rpx;
									font-weight: bold;
									text-shadow: 0px 0px 16px #a84700;
								}
							}
						}
					}
				}

				.coupon_btn {
					width: 400rpx;
					position: absolute;
					bottom: 10rpx;
					left: 100rpx;
				}
			}
		}

		.app_popup {
			.pop_box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 600rpx;
				height: 600rpx;
				border-radius: 10rpx;
				position: relative;

				.pop_bg {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}

				.pop_version {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-top: 100rpx;
					margin-left: 60rpx;

					.pop_header {
						color: #fff;
					}

					.pop_content {
						// padding: 0 20rpx;
						margin-top: 120rpx;
					}
				}

				.rate {
					width: 550rpx;
					margin: 0 auto;
					align-items: center;
					display: flex;

					.rate_image {
						width: 500rpx;
						margin-right: 10rpx;
					}
				}

				.down_btn_group {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.down_btn {
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 10rpx;

						&.cancel {
							background-color: #ccc;
							color: #999;
						}

						&.down {
							background-color: #a361f6;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>